<template>
    <el-menu
        class="menu-nav"
        :mode="mode"
        :collapse="collapse"
        :default-active="defaultActive"
        :uniqueOpened="uniqueOpened" 
        :router="router"
        v-bind="$attrs">
        <template v-for="(item, index) in (menus || [])">
            <MenuNode v-if="!item.hidden" 
                :menuItem="item" 
                :mode="mode"
                :collapse="collapse"
                :key="index" >
            </MenuNode>
        </template>
    </el-menu>
</template>

<script>
import { mapState } from 'vuex';
import MenuNode from './menu-node.vue';

export default {
    components: { MenuNode },
    props: {
        collapse: Boolean,
        menuTrigger: {
            type: String,
            default: 'hover'
        },
        mode: {
            type: String,
            default: 'vertical'
        },
        uniqueOpened: {
            type: Boolean,
            default: true
        },
        router: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        ...mapState({
            menus: state => state.menus.menus
        }),
        defaultActive() {
            const { parent } = this.$route.meta;
            return (parent && parent.length && parent[0].path) || this.$route.path
        }
    }
}
</script>

<style lang="scss" scoped>
//el-menu 更改horizontal模式的下边框颜色
.el-menu.el-menu--horizontal{
    border-bottom-color: transparent;
}

//el-menu 更改horizontal模式的行高
/deep/.el-menu--horizontal .el-menu .el-menu-item, 
/deep/.el-menu--horizontal .el-menu .el-submenu__title{
    height: 50px;
    line-height: 50px;
}

//el-menu 选中行的背景颜色
/deep/.el-menu-item.is-active{
    background-color: rgba(0, 0, 0, 0.15)!important;
}

//el-menu 分组右图标颜色改为继承
/deep/.el-submenu__title i{
    color: inherit;
}

//el-menu 去除弹框的padding
/deep/.el-menu--popup{
    padding: 0!important;
}
</style>
